<template>
  <div id="navbar">
    <NavBar></NavBar>
  </div>
  <h1>注册</h1><br>
  <div id="register">
    <br>
    <el-form :model="formData" label-width="20%" :rules="rules" status-icon ref="ruleFormRef" style="margin-top:5px;">
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="formData.nickname" placeholder="仅支持中英文、数字和下划线，长度不超过20" style="width:95%" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password1">
        <el-input v-model="formData.password1" type="password" placeholder="仅支持英文、数字和下划线，长度为8~20" style="width:95%" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="password2">
        <el-input v-model="formData.password2" type="password" placeholder="请再次输入密码" style="width:95%" maxlength="20"></el-input>
      </el-form-item>
    </el-form>
    <el-form :inline="true"  :model="formData" label-width="50%" :rules="rules" status-icon>
      <el-form-item  label="手机号码" style="width:40%">
        <el-select v-model="region" placeholder="region" size="large">
          <el-option v-for="item in regions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="phoneNumber" style="width:55%">
        <el-input v-model="formData.phoneNumber" placeholder="登录账号凭证" style="width:65%"></el-input>
      </el-form-item>
    </el-form>
    <el-form  :model="formData" label-width="20%" :rules="rules" status-icon>
      <el-form-item label="验证码" prop="verificationCode" id="verify">
        <el-input v-model="formData.verificationCode" id="verificationInput" style="width: 40%;position:relative;bottom:25px;"></el-input>
        <img :src=imageURL alt="验证码" @click="changeVerificationCode" id="verificationCodeImg" title="点击图片可以更换验证码，不区分大小写。">
      </el-form-item>
      <!-- <br> -->
      <el-form-item style="position: relative;bottom:25px;">
        <el-checkbox v-model="formData.isAgree"></el-checkbox>
        <span id="tips">
          我已同意<router-link to="User_agreement" target="_blank">《用户协议》</router-link>和<router-link to="Privacy_policy" target="_blank">《隐私政策》</router-link>
        </span>
      </el-form-item>
      <el-button type="primary" @click="tryRegister" :disabled="checkAgree()" style="margin-left: 30%;position:relative;bottom:35px;">注册</el-button>
      <el-button type="success" @click="goLogin" style="position:relative;bottom:35px;">前往登录</el-button>
    </el-form>
    <el-dialog v-model="dialogVisible" :title="registerResult" width="30%">
      <span>{{tips}}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false;confirm=false;afterRegister();">不跳转</el-button>
          <el-button type="primary" @click="dialogVisible = false;confirm=true;afterRegister();">跳转</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <br><br>
  <div id="footer">
    <Footer></Footer>
  </div>
</template>

<script>
import * as md5 from '@/assets/js/md5.js'
import * as registerRequest from '@/network/register.js';
import { ElMessage } from 'element-plus';
import { ElForm } from 'element-plus'
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
  name: "Register",
  components: {NavBar,Footer},
  data(){
    const checkNickname=(rule,value,callback)=>{
      this.rightInput[0]=false;
      if(value==="") return callback(new Error('昵称不可为空!'));
      else if(!this.nicknameRegx.test(value)) return callback(new Error('昵称仅支持中英文、数字和下划线!'));
      else if(value.length>20) return callback(new Error('昵称不可超过20个字符'));
      this.rightInput[0]=true;
      callback();
    }
    const checkPassword1=(rule,value,callback)=>{
      this.rightInput[1]=false;
      if(value==="") return callback(new Error('密码不可为空!'));
      else if(!this.passwordRegx.test(value)) return callback(new Error('密码仅支持英文、数字和下划线!'));
      else if(value.length>20||value.length<8) return callback(new Error('密码长度应为8~20个字符'));
      else if(this.checkPasStrength()<2) return callback(new Error('密码至少包含小写字母、大写字母、数字和下划线中的两种'));
      else if(this.formData.password2!=""){
        this.$refs.ruleFormRef.validateField('password2',()=>null);
        if(this.formData.password2!=value)
          return callback();
      }
      this.rightInput[1]=true;
      callback();
    }
    const checkPassword2=(rule,value,callback)=>{
      this.rightInput[2]=false;
      if(value==="") return callback(new Error('请再次输入密码进行确认!'));
      else if(value!==this.formData.password1) return callback(new Error('两次输入的密码不一致'));
      this.rightInput[2]=true;
      callback();  
    }
    const checkPhoneNumber=(rule,value,callback)=>{
      this.rightInput[3]=false;
      if(value==="") return callback(new Error('手机号码不可为空!'));
      else if(value.length!=11) return callback(new Error('手机号码应为11位数字'));
      else if(!this.phoneNumberRegx.test(value)) return callback(new Error('请输入正确的手机号码!'));
      registerRequest.checkPhoneNumber(value).then(res=>{
        if(res.state==400){
          this.message1();
        }
        else{
          this.rightInput[3]=true;
        }
      });
      callback();
    }
    return {
      stateCode:0,
      tips:"",
      registerResult:"",
      dialogVisible:false,
      confirm:null,
      rightInput:[false,false,false,false],
      nicknameRegx:/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
      passwordRegx:/^[_a-zA-Z0-9]+$/,
      phoneNumberRegx:/^1[3456789]\d{9}$/,
      region:"中国",
      regions:[{value:'中国',label:'中国'},{value:'蒙古',label:'蒙古'},{value:'朝鲜',label:'朝鲜'},{value:'韩国',label:'韩国'},{value:'日本',label:'日本'},{value:'菲律宾',label:'菲律宾'},{value:'越南',label:'越南'},{value:'老挝',label:'老挝'},{value:'柬埔寨',label:'柬埔寨'},{value:'缅甸',label:'缅甸'},{value:'泰国',label:'泰国'},{value:'马来西亚',label:'马来西亚'},{value:'文莱',label:'文莱'},{value:'新加坡',label:'新加坡'},{value:'印度尼西亚',label:'印度尼西亚'},{value:'东帝汶',label:'东帝汶'},{value:'尼泊尔',label:'尼泊尔'},{value:'不丹',label:'不丹'},{value:'孟加拉国',label:'孟加拉国'},{value:'印度',label:'印度'},{value:'巴基斯坦',label:'巴基斯坦'},{value:'斯里兰卡',label:'斯里兰卡'},{value:'马尔代夫',label:'马尔代夫'},{value:'哈萨克斯坦',label:'哈萨克斯坦'},{value:'吉尔吉斯斯坦',label:'吉尔吉斯斯坦'},{value:'塔吉克斯坦',label:'塔吉克斯坦'},{value:'乌兹别克斯坦',label:'乌兹别克斯坦'},{value:'土库曼斯坦',label:'土库曼斯坦'},{value:'阿富汗',label:'阿富汗'},{value:'伊拉克',label:'伊拉克'},{value:'伊朗',label:'伊朗'},{value:'叙利亚',label:'叙利亚'},{value:'约旦',label:'约旦'},{value:'黎巴嫩',label:'黎巴嫩'},{value:'以色列',label:'以色列'},{value:'巴勒斯坦',label:'巴勒斯坦'},{value:'沙特阿拉伯',label:'沙特阿拉伯'},{value:'巴林',label:'巴林'},{value:'卡塔尔',label:'卡塔尔'},{value:'科威特',label:'科威特'},{value:'阿拉伯联合酋长国',label:'阿拉伯联合酋长国'},{value:'阿曼',label:'阿曼'},{value:'也门',label:'也门'},{value:'格鲁吉亚',label:'格鲁吉亚'},{value:'亚美尼亚',label:'亚美尼亚'},{value:'阿塞拜疆',label:'阿塞拜疆'},{value:'土耳其',label:'土耳其'},{value:'塞浦路斯',label:'塞浦路斯'},{value:'芬兰',label:'芬兰'},{value:'瑞典',label:'瑞典'},{value:'挪威',label:'挪威'},{value:'冰岛',label:'冰岛'},{value:'丹麦',label:'丹麦'},{value:'爱沙尼亚',label:'爱沙尼亚'},{value:'拉脱维亚',label:'拉脱维亚'},{value:'立陶宛',label:'立陶宛'},{value:'白俄罗斯',label:'白俄罗斯'},{value:'俄罗斯',label:'俄罗斯'},{value:'乌克兰',label:'乌克兰'},{value:'摩尔多瓦',label:'摩尔多瓦'},{value:'波兰',label:'波兰'},{value:'捷克',label:'捷克'},{value:'斯洛伐克',label:'斯洛伐克'},{value:'匈牙利',label:'匈牙利'},{value:'德国',label:'德国'},{value:'奥地利',label:'奥地利'},{value:'瑞士',label:'瑞士'},{value:'列支敦士登',label:'列支敦士登'},{value:'英国',label:'英国'},{value:'爱尔兰',label:'爱尔兰'},{value:'荷兰',label:'荷兰'},{value:'比利时',label:'比利时'},{value:'卢森堡',label:'卢森堡'},{value:'法国',label:'法国'},{value:'摩纳哥',label:'摩纳哥'},{value:'罗马尼亚',label:'罗马尼亚'},{value:'保加利亚',label:'保加利亚'},{value:'塞尔维亚',label:'塞尔维亚'},{value:'马其顿',label:'马其顿'},{value:'阿尔巴尼亚',label:'阿尔巴尼亚'},{value:'希腊',label:'希腊'},{value:'斯洛文尼亚',label:'斯洛文尼亚'},{value:'克罗地亚',label:'克罗地亚'},{value:'波斯尼亚和墨塞哥维那',label:'波斯尼亚和墨塞哥维那'},{value:'乍得',label:'乍得'},{value:'中非',label:'中非'},{value:'喀麦隆',label:'喀麦隆'},{value:'赤道几内亚',label:'赤道几内亚'},{value:'加蓬',label:'加蓬'},{value:'刚果共和国',label:'刚果共和国'},{value:'刚果民主共和国',label:'刚果民主共和国'},{value:'圣多美及普林西比',label:'圣多美及普林西比'},{value:'毛里塔尼亚',label:'毛里塔尼亚'},{value:'西撒哈拉',label:'西撒哈拉'},{value:'塞内加尔',label:'塞内加尔'},{value:'冈比亚',label:'冈比亚'},{value:'马里',label:'马里'},{value:'布基纳法索',label:'布基纳法索'},{value:'几内亚',label:'几内亚'},{value:'几内亚比绍',label:'几内亚比绍'},{value:'佛得角',label:'佛得角'},{value:'塞拉利昂',label:'塞拉利昂'},{value:'利比里亚',label:'利比里亚'},{value:'科特迪瓦',label:'科特迪瓦'},{value:'加纳',label:'加纳'},{value:'多哥',label:'多哥'},{value:'贝宁',label:'贝宁'},{value:'尼日尔',label:'尼日尔'},{value:'赞比亚',label:'赞比亚'},{value:'安哥拉',label:'安哥拉'},{value:'津巴布韦',label:'津巴布韦'},{value:'马拉维',label:'马拉维'},{value:'莫桑比克',label:'莫桑比克'},{value:'博茨瓦纳',label:'博茨瓦纳'},{value:'纳米比亚',label:'纳米比亚'},{value:'南非',label:'南非'},{value:'斯威士兰',label:'斯威士兰'},{value:'莱索托',label:'莱索托'},{value:'马达加斯加',label:'马达加斯加'},{value:'科摩罗',label:'科摩罗'},{value:'毛里求斯',label:'毛里求斯'},{value:'澳大利亚',label:'澳大利亚'},{value:'新西兰',label:'新西兰'},{value:'巴布亚新几内亚',label:'巴布亚新几内亚'},{value:'所罗门群岛',label:'所罗门群岛'},{value:'瓦努阿图',label:'瓦努阿图'},{value:'密克罗尼西亚',label:'密克罗尼西亚'},{value:'马绍尔群岛',label:'马绍尔群岛'},{value:'帕劳',label:'帕劳'},{value:'瑙鲁',label:'瑙鲁'},{value:'基里巴斯',label:'基里巴斯'},{value:'图瓦卢',label:'图瓦卢'},{value:'萨摩亚',label:'萨摩亚'},{value:'斐济群岛',label:'斐济群岛'},{value:'汤加',label:'汤加'},{value:'加拿大',label:'加拿大'},{value:'美国',label:'美国'},{value:'墨西哥',label:'墨西哥'},{value:'格陵兰',label:'格陵兰'},{value:'危地马拉',label:'危地马拉'},{value:'伯利兹',label:'伯利兹'},{value:'萨尔瓦多',label:'萨尔瓦多'},{value:'洪都拉斯',label:'洪都拉斯'},{value:'尼加拉瓜',label:'尼加拉瓜'},{value:'哥斯达黎加',label:'哥斯达黎加'},{value:'巴拿马',label:'巴拿马'},{value:'巴哈马',label:'巴哈马'},{value:'古巴',label:'古巴'},{value:'牙买加',label:'牙买加'},{value:'海地',label:'海地'},{value:'多米尼加共和国',label:'多米尼加共和国'},{value:'安提瓜和巴布达',label:'安提瓜和巴布达'},{value:'圣基茨和尼维斯',label:'圣基茨和尼维斯'},{value:'多米尼克',label:'多米尼克'},{value:'圣卢西亚',label:'圣卢西亚'},{value:'圣文森特和格林纳丁斯',label:'圣文森特和格林纳丁斯'},{value:'格林纳达',label:'格林纳达'},{value:'巴巴多斯',label:'巴巴多斯'},{value:'特立尼达和多巴哥',label:'特立尼达和多巴哥'},{value:'哥伦比亚',label:'哥伦比亚'},{value:'委内瑞拉',label:'委内瑞拉'},{value:'圭亚那',label:'圭亚那'},{value:'法属圭亚那',label:'法属圭亚那'},{value:'苏里南',label:'苏里南'},{value:'厄瓜多尔',label:'厄瓜多尔'},{value:'秘鲁',label:'秘鲁'},{value:'玻利维亚',label:'玻利维亚'},{value:'巴西',label:'巴西'},{value:'智利',label:'智利'},{value:'阿根廷',label:'阿根廷'},{value:'乌拉圭',label:'乌拉圭'},{value:'巴拉圭',label:'巴拉圭'},{value:'意大利',label:'意大利'},{value:'梵蒂冈',label:'梵蒂冈'},{value:'圣马力诺',label:'圣马力诺'},{value:'马耳他',label:'马耳他'},{value:'西班牙',label:'西班牙'},{value:'葡萄牙',label:'葡萄牙'},{value:'安道尔',label:'安道尔'},{value:'埃及',label:'埃及'},{value:'利比亚',label:'利比亚'},{value:'苏丹',label:'苏丹'},{value:'突尼斯',label:'突尼斯'},{value:'阿尔及利亚',label:'阿尔及利亚'},{value:'摩洛哥',label:'摩洛哥'},{value:'埃塞俄比亚',label:'埃塞俄比亚'},{value:'厄立特里亚',label:'厄立特里亚'},{value:'索马里',label:'索马里'},{value:'吉布提',label:'吉布提'},{value:'肯尼亚',label:'肯尼亚'},{value:'坦桑尼亚',label:'坦桑尼亚'},{value:'乌干达',label:'乌干达'},{value:'卢旺达',label:'卢旺达'},{value:'布隆迪',label:'布隆迪'},{value:'塞舌尔',label:'塞舌尔'}],
      baseURL:"http://localhost:80/web-course-backend/router.php?t=verification/getVerification/",
      // homeURL:"/?#/app/index",
      loginURL:"/?#/login",
      imageURL:"",
      formData:{
        nickname:"",
        password1:"",
        password2:"",
        phoneNumber:"",
        verificationCode:"",
        isAgree:true,
      },
      rules:{
        nickname:[ { validator:checkNickname, trigger:'change' } ],
        password1:[ { validator:checkPassword1, trigger:'change' } ],
        password2:[ { validator:checkPassword2, trigger:'change' } ],
        phoneNumber:[ { validator:checkPhoneNumber, trigger:'change' } ],
      },
      message1:()=>{
        ElMessage.error('该手机号码已被注册！');
      },
      message2:()=>{
        ElMessage.error('验证码错误');
      },
      message3:()=>{
        ElMessage.error('验证码不能为空');
      },
      message4:()=>{
        ElMessage.error('请按照提示正确填写信息!');
      }
      
    }
  },
  methods:{
    md5Encode(password){
      return md5.hex_md5(password);
    },
    test(){
      console.log(this.formData.nickname);
    },
    afterRegister(){
      if(this.stateCode==200){
        if(this.confirm){
          this.$router.push('/app/index');
        }
        else{
          location.reload();
          return;
        }
      }
      else if(this.stateCode==201){
        if(this.confirm){
          localStorage.setItem('isRememberPhoneNumber',0);
          localStorage.setItem('isRememberPassword',0);
          localStorage.setItem('phoneNumber',this.formData.phoneNumber);
          localStorage.setItem('password',this.formData.password1);
          localStorage.setItem('isFromRegister',1);
          this.$router.push('/login');
        }
        else{
          location.reload();
          return;
        }
      }
    },
    checkPasStrength(){
      var strength=0;
      var pas=this.formData.password1;
      if(/[_]/.test(pas)) strength++;
      if(/[0-9]/.test(pas)) strength++;
      if(/[a-z]/.test(pas)) strength++;
      if(/[A-Z]/.test(pas)) strength++;
      return strength;
    },
    tryRegister(){
      if(this.checkInput()){
        this.message4();
        return;
      }
      if(this.formData.verificationCode==""){
        this.message3();
        return;
      }
      var registerData={};
      registerData.nickname=this.formData.nickname;
      registerData.password=this.md5Encode(this.formData.password1);
      registerData.phone_num=this.formData.phoneNumber;
      registerData.verificationCode=this.formData.verificationCode;
      registerRequest.register(registerData).then(res=>{
        this.stateCode=res.state;
        if(res.state==200){
          this.registerResult="注册成功";
          this.tips="自动登录成功，即将跳转网站主页！";
          this.dialogVisible=true;
          return;
        }
        else if(res.state==201){
          this.registerResult="注册成功";
          this.tips="自动登录失败，即将跳转登陆界面！";
          this.dialogVisible=true;
        }
        else if(res.state==400){
          this.message2();
          this.formData.verificationCode="";
          this.changeVerificationCode();
          return;
        }
        else if(res.state==401){
          this.message1();
          this.formData.verificationCode="";
          this.changeVerificationCode();
          return;
        }
      });
    },
    goLogin(){
      this.$router.push("/login");
    },
    changeVerificationCode(){
      this.imageURL=this.baseURL+Math.random();
    },
    checkInput(){
      for(var i=0;i<this.rightInput.length;i++){
        if(this.rightInput[i]==false)
          return true;
      }
      return false;
    },
    checkAgree(){
      if(this.formData.isAgree) return false;
      return true;
    },
  },
  created(){
    this.changeVerificationCode();
  }
}
</script>

<script></script>

<style scoped lang="scss">
  #register{
    margin: auto;
    width: 450px;
    border-radius: 5px;
    background:#f4f5f7;
    border:#eeeeee 1px solid;
  }
  #verificationCodeImg{
    width: 50%;
    height: 50px;
    border: #eeeeee 1px solid;
    border-radius: 5px;
    margin-left: 5%;
  }
  #verificationInput{
    width: 40%;
    position:relative;
    bottom:25px;
  }
  #tips{
    position: relative;
    bottom: 2px;
  }
  h1{
    margin: auto;
    text-align: center;
  }
  // #navbar{
  //   position: absolute;
  // }
  // #footer{
  //   position: absolute;
  // }
</style>
